<template>
  <div>
    <h2>事件绑定指令</h2>

    <p>{{ age }}</p>
    

    <!-- 事件绑定指令语法：v-on：事件名="处理程序" v-on：可以简化成 @-->
    <!-- <button v-on:事件名="处理程序">按钮</button> -->
    
    <!-- 事件处理程序，如果代码非常简单，可以直接写到 template 里 -->
    <!-- 处理程序，代码只能使用vue中定义好的 data 数据 或 methods方法 -->
    <button @click="age++">+1</button>

    <!-- 事件处理程序，如果代码非常多，方法必须定义到和 data 平级的 methods方法里 -->
    <button @click="changeAge">按钮</button>

  </div>
</template>

<script>

export default {
  data() {
    return {
      age: 20,
    };
  },

  methods:{
    changeAge(){
      //vue中，找data数据，methods方法.... 都是通过 this 直接找【这是vue中固定的语法】
      this.age--
      console.log(123);
    }
  }
};
</script>

<style>
</style>